let boxList = document.querySelector(".shopcart-box-list");
let uid = localStorage.getItem("uid");

loadcartListFn();
async function loadcartListFn(){
    let {data} = await axios.get(cartListAPI, {params: {id: uid}});
    let productArr = data.data;
    let html = productArr.map(function(pObj){
        let sum = pObj.pprice * pObj.pnum;
        let v = `
        <div class="shopcart-list-event">
            <input class="form-checkbox single-ipt" type="checkbox" onchange="singleChange()">
            <div class="shopcart-list-left">
                <img src="${pObj.pimg}" alt="">
            </div>
            <div class="shopcart-list-right event-right">
                <div class="shopcart-goods">${pObj.pname}
                    <button class="event-del" onclick="delFn(${pObj.pid}, this)">删除</button>
                </div>
                <div class="shopcart-price single-price">${pObj.pprice}</div>
                <div class="shopcart-qty">
                    <button class="qty-sub" onclick="subFn(${pObj.pid}, this)">-</button>
                    <input class="qty-value single-value" type="text" value="${pObj.pnum}">
                    <button class="qty-add" onclick="addFn(${pObj.pid}, this)">+</button>
                </div>
                <div class="shopcart-sum single-sum">${sum}</div>
            </div>
        </div>
        `
        return v;
    });
    boxList.innerHTML = html.join("");  

};
async function addFn(pid, btn){
    console.log(btn); // button
    let ipt = btn.previousElementSibling;
    let pnum = parseInt(ipt.value) + 1;
    let params = {uid, pid, pnum};
    let {data} = await axios.get(cartUpdateAPI, {params});
    console.log(data);
    ipt.value = pnum;

    // let div = btn.parentNode.parentNode;
    // console.log(div);
    // let singlePrice = div.querySelector(".single-price");
    // console.log(singlePrice);
    // let num = 0;
    // let count = ipt.value * singlePrice.innerHTML;
    // console.log(count);

    // let singleSum = div.querySelector(".single-sum");
    // count = num + count;
    // singleSum.innerHTML = count;
    // console.log(ipt.value);
    singleCount();
    countFn();

};
async function subFn(pid, btn){
    console.log(btn); // button
    let ipt = btn.nextElementSibling;
    let pnum = parseInt(ipt.value);
    if(pnum == 1){
        //如果 输入框的值 是1  什么都不做
    }else{
        pnum = pnum - 1;
        let params = {uid, pid, pnum};
        let {data} = await axios.get(cartUpdateAPI, {params});
        console.log(data);
        ipt.value = pnum;
        console.log(ipt.value);
        
        singleCount();
        countFn();

    }
}

async function delFn(pid, btn){
    console.log(btn);
    let params = {uid, pid};
    let {data} = await axios.get(cartDeletAPI, {params});
    console.log(data);

    // loadcartListFn();
    btn.parentNode.parentNode.parentNode.remove();
    countFn();
}


function singleChange(){
    console.log("singleChange");
    let singleIpts = document.querySelectorAll(".single-ipt");
    console.log(singleIpts);
    let arr = [...singleIpts];
    console.log(arr);

    let flag = arr.every(v => v.checked == true); // true
    let allIpt = document.querySelector(".all-ipt");
    allIpt.checked = flag;
    countFn();

}
function allChange(){
    let singleIpts = document.querySelectorAll(".single-ipt");
    let allIpt = document.querySelector(".all-ipt");

    singleIpts.forEach(v => v.checked = allIpt.checked);
    console.log("all");
    countFn();
}
function singleCount(){
    let singleValue = document.querySelectorAll(".single-value");
    singleValue.forEach(function(btn){
        console.log(btn);
        let div = btn.parentNode.parentNode;
        console.log(div);
        let singlePrice = div.querySelector(".single-price");
        let ipt = div.querySelector(".single-value");
        console.log(singlePrice);
        let num = 0;
        let count = ipt.value * singlePrice.innerHTML;
        console.log(count);

        let singleSum = div.querySelector(".single-sum");
        count = num + count;
        singleSum.innerHTML = count;
        console.log(ipt.value);
    })

    
}
function countFn(){
    let singleIpts = document.querySelectorAll(".single-ipt");
    console.log(singleIpts);
    let arr = [...singleIpts];
    console.log(arr);
    //过滤出  输入框的checked属性为true元素
    let resArr = arr.filter(v => v.checked == true);
    console.log(resArr);
    
    let num = 0;
    resArr.forEach(singleIpt => {
        let div = singleIpt.parentNode;
        let singleNum = div.querySelector(".single-value");
        let singlePrice = div.querySelector(".single-price");
        
        let count = singleNum.value * singlePrice.innerHTML;
        num = num + count;
        console.log(num);
    })
   
    let sumPrice = document.querySelectorAll(".sum-price");
    sumPrice[0].innerHTML = num;
    sumPrice[1].innerHTML = num;
    sumPrice[2].innerHTML = num;
    sumPrice[3].innerHTML = num;
}


